<template>
  <view class="seize-orders">
    <view class="order">
      <view class="order-list" v-for="item in orderList" :key="item.id">
        <view>
          <view class="status-infor-top">
            <view class="status">待抢单</view>
            <view class="time">{{
              item.serviceTime
                ? formatTimes(item.serviceTime, "YYYY/MM/DD hh:mm:ss")
                : ""
            }}</view>
            <!-- <view class="link-detail">
              <view class="title">订单详情</view>
              <view class="u-icon"
                ><u-icon name="arrow-right" color="#24345b" size="12"></u-icon
              ></view>
            </view> -->
          </view>
          <view class="name-and-price">
            <view class="name">{{ item.orderCategoryName }}</view>
            <view class="price">{{ item.viewOrderAmount }}</view>
          </view>
          <view class="address">{{ item.address }}</view>
        </view>
        <view class="btn-container">
          <u-button
            class="btn-list"
            type="primary"
            :hairline="true"
            shape="circle"
            size="small"
            text="抢单"
            @click="requestOrderCreate(item)"
          ></u-button>
        </view>
      </view>
      <u-empty
        v-if="isEmpty"
        mode="order"
        text="需求单为空"
        icon="http://cdn.uviewui.com/uview/empty/car.png"
      >
      </u-empty>
    </view>
  </view>
</template>

<script>
import { getRequestOrderList, requestOrderCreate } from "@/api/order";
import { workerDetail } from "@/api/worker";
import { formatTimes } from "@/utils/index";
export default {
  data() {
    return {
      formatTimes,
      page: {
        pageNo: 1,
        pageSize: 10,
      },
      orderList: [],
      isLoading: false,
      lastPageIndex: 0,
      isEmpty: false,
    };
  },
  onLoad() {},
  onShow() {
    this.page.pageNo = 1;
    this.orderList = [];
    this.getRequestOrderList();
  },
  // 下拉刷新
  onPullDownRefresh() {
    console.log("下拉刷新");
    this.page.pageNo = 1;
    this.orderList = [];
    this.getRequestOrderList();
  },
  // 上拉加载
  onReachBottom() {
    console.log("上拉加载");
    if (this.page.pageNo < this.lastPageIndex) {
      this.page.pageNo++;
      this.getRequestOrderList();
    }
  },
  methods: {
    // 获取抢单列表
    async getRequestOrderList() {
      try {
        this.isLoading = true;
        const areaId = JSON.parse(
          uni.getStorageSync("areaId") ? uni.getStorageSync("areaId") : "[]"
        );
        const categoryId = JSON.parse(
          uni.getStorageSync("categoryId")
            ? uni.getStorageSync("categoryId")
            : "[]"
        );
        const parmas = {
          areaIds: areaId,
          orderCategoryIds: categoryId,
          ...this.page,
        };
        const res = await getRequestOrderList(parmas);
        const list = res.data.objects;
        this.isLoading = false;
        this.orderList = [...this.orderList, ...list];
        this.lastPageIndex = res.data.lastPageIndex;
        this.orderList.length <= 0
          ? (this.isEmpty = true)
          : (this.isEmpty = false);
        uni.stopPullDownRefresh();
      } catch (error) {
        this.isLoading = false;
        console.log(error);
      }
    },
    // 抢单
    async requestOrderCreate(item) {
      try {
        const res = await workerDetail();
        if (res.data.status === 0) {
          return wx.showToast({
            title: "账号被锁定，请联系管理员！",
            icon: "none",
            duration: 2000,
          });
        }
        if (res.data.auditStatus != 1) {
          return wx.showToast({
            title: "未入驻，请联系管理员！",
            icon: "none",
            duration: 2000,
          });
        }
        const workerInfor = JSON.parse(uni.getStorageSync("workerInfor"));
        console.log(workerInfor);
        const parmas = {
          orderCategoryName: item.orderCategoryName,
          requestOrderNo: item.requestOrderNo,
          requestOrderPrice: item.viewOrderAmount,
          requestOrderRawPrice: item.orderAmount,
          serviceTime: item.serviceTime,
          userAddress: item.address,
          userName: item.userName,
          userPhone: item.userPhone,
          profitScale: item.profitScale,
          orderCategoryId: item.categoryId,
          workerName: workerInfor.realName,
          workerPhone: workerInfor.phone,
        };
        await requestOrderCreate(parmas);
        wx.showToast({
          title: "抢单成功！",
          icon: "none",
          duration: 2000,
        });
        this.orderList = [];
        this.getRequestOrderList();
      } catch (error) {
        console.log(error);
        wx.showToast({
          title: "抢单失败",
          icon: "none",
          duration: 2000,
        });
      }
    },
    // 查看详情
    // linkOrderDetail(item) {
    //   uni.navigateTo({
    //     url: `/pages/order/orderDetail?orderNo=${item.requestOrderNo}`,
    //   });
    // },
  },
};
</script>

<style lang="scss" scoped>
.seize-orders {
  width: 96%;
  margin: 30rpx auto;
  .order {
    .order-list {
      height: 250rpx;
      background: #ffffff;
      border-radius: 16rpx;
      padding: 24rpx 30rpx 40rpx 30rpx;
      margin-bottom: 30rpx;
      .status-infor-top {
        display: flex;
        justify-content: space-between;
        .status {
          height: 30rpx;
          background: #ef6d44;
          border-radius: 6rpx;
          font-size: 20rpx;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
          line-height: 30rpx;
          padding: 8rpx;
        }
        .time {
          font-size: 24rpx;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #24345b;
          line-height: 46rpx;
          flex: 1;
          margin-left: 24rpx;
        }
        .link-detail {
          font-size: 24rpx;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          color: #24345b;
          line-height: 46rpx;
          display: flex;
          .title {
            margin-right: 10rpx;
          }
          .u-icon {
            margin-top: 6rpx;
          }
        }
      }
      .name-and-price {
        padding: 24rpx 0 14rpx 0;
        display: flex;
        .name {
          font-size: 36rpx;
          font-family: Source Han Sans CN-Medium, Source Han Sans CN;
          font-weight: 500;
          color: #000000;
          line-height: 44rpx;
          flex: 1;
        }
        .price {
          font-size: 32rpx;
          font-family: Source Han Sans CN-Medium, Source Han Sans CN;
          font-weight: 500;
          color: #ef6d44;
          line-height: 50rpx;
          &:before {
            content: "¥";
            font-size: 20rpx;
            font-weight: normal;
          }
        }
      }
      .address {
        font-size: 28rpx;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #000000;
      }
      .btn-container {
        display: flex;
        justify-content: space-around;
        margin-top: 36rpx;
        .btn-list {
          background: #ef6d44;
          border: none;
          width: 80%;
        }
      }
    }
  }
}
</style>
